<template>
  <div class="main_spac1">
    <div class="main_white padding10">
      <div class="mainor_form">
        <el-form
          :inline="true"
          :model="form"
          class="demo-form-inline"
          ref="userListFrom"
          label-width="60px"
          id="form"
        >
          <el-form-item label="商品：" prop="goods_spu_id">
            <!-- <el-input v-model.trim="form.name" placeholder="名称" clearable class="wid220"></el-input> -->
            <change-goods-input
              url="1"
              ref="changeGoodsInput"
              @clear="
                () => {
                  this.form.goods_spu_id = '';
                }
              "
              @sendValue="
                (data) => {
                  this.form.goods_spu_id = data.id;
                }
              "
            ></change-goods-input>
          </el-form-item>
          <el-form-item label="分类：" prop="category_id" class="wid220">
            <el-cascader
              v-model="form.category_id"
              :options="options"
              :props="defaultProps"
              @change="getArticleList"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="状态：" prop="status">
            <el-select
              v-model.trim="form.status"
              placeholder="状态"
              class="wid220"
              @change="getArticleList"
            >
              <el-option label="所有" value=""></el-option>
              <el-option
                v-for="(statusList, index) in list.statusList"
                :key="index"
                :label="statusList"
                :value="index + 1"
              ></el-option>
            </el-select>
          </el-form-item>
          <MainFormBtn @reset="reset" @getSearchFor="getSearchFor" :loading="listLoading" :showBtn="moredata">
            <el-button class="mg-r-6" v-repeatClick @click="importForm">导入</el-button>
            <el-button v-repeatClick @click="export_pop">导出</el-button>
          </MainFormBtn>
            <div class="more el-form-item" @click="more">
              <span>更多</span>
              <i :class="[{ on: moredata }, ' el-icon-arrow-down']"></i>
            </div>
            <div class="clearfix"></div>
            <el-collapse-transition>
              <div v-show="moredata">
                <el-form-item label="标品：" prop="is_standard">
                  <el-select
                    v-model.trim="form.is_standard"
                    placeholder="是否标品"
                    class="wid220"
                    @change="getArticleList"
                  >
                    <el-option label="所有" value=""></el-option>
                    <el-option
                      v-for="(standardList, index) in list.standardList"
                      :key="index"
                      :label="standardList"
                      :value="index + 1"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="报价：" prop="type">
                  <el-select
                    v-model.trim="form.type"
                    placeholder="报价"
                    class="wid220"
                    @change="getArticleList"
                  >
                    <el-option label="所有" value="0"></el-option>
                    <el-option label="已报价" value="1"></el-option>
                    <el-option label="未报价" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <div class="clearfix"></div>
                <el-form-item label=" ">
                  <MainFormBtn class="btn-bottom" @reset="reset" @getSearchFor="getSearchFor" :loading="listLoading" :showBtn="!moredata">
                    <el-button class="mg-r-6" v-repeatClick @click="importForm">导入</el-button>
                    <el-button el-button v-repeatClick @click="export_pop">导出</el-button>
                  </MainFormBtn>
                </el-form-item>
              </div>
            </el-collapse-transition>
          <!-- <el-form-item label="推荐" prop="is_recommend">
          <el-select
            v-model.trim="form.is_recommend"
            placeholder="今日推荐"
            class="wid220"
          >
            <el-option label="所有" value=""></el-option>
            <el-option
              v-for="(recommendList, index) in list.recommendList"
              :key="index"
              :label="recommendList"
              :value="index + 1"
            ></el-option>
          </el-select>
        </el-form-item> -->
        </el-form>
      </div>
      <div class="main-controls-wrap">
        <div>
          <router-link to="/commodity/group/record"><el-button>操作记录</el-button></router-link>
          <el-button @click="clean" v-repeatClick>清除所有公式</el-button>
        </div>
      </div>
      <div class="main_table">
        <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="list.list.data"
        element-loading-text="加载中"
        fit
        border
        highlight-current-row
        @selection-change="handleSelectionChange"
        :row-class-name="getRowClass"
        :height="borderHeight - 6"
        :header-cell-class-name="this.$verticaline"
        :header-cell-style="tableHeightStyle"
        @header-dragend="changeTableWidth"
      >
        <el-table-column type="expand" width="1">
          <template slot-scope="props">
            <div class="maincg_ul">
              <ul class="boxha">
                <li
                  class="box"
                  v-for="(item, index) in props.row.group_data"
                  :key="index"
                >
                  <span>{{ item.title }}：</span>
                  <el-select
                    v-model.trim="item.mod"
                    placeholder
                    class="wid60"
                    @change="goodsoffer_offer(item.mod, props.$index, index, 1)"
                  >
                    <el-option label="加" :value="1"></el-option>
                    <el-option label="乘" :value="2"></el-option>
                    <el-option label="固" :value="3"></el-option>
                  </el-select>
                  <div class="maincg_uli">
                    <el-input
                      v-model.trim="item.price"
                      class="wid110"
                      :disabled="item.disabled"
                      type="number"
                      :ref="'maincg' + String(props.$index) + String(index)"
                    ></el-input>
                    <!-- @blur.prevent=" (val) => { maincgBlur(val, props.$index,
                      index); } " @keyup.enter.native="$event.target.blur" -->
                    <div
                      class="maincg_uli_s"
                      @click="offer(props.$index, index)"
                      v-if="item.disabled"
                    >
                      <svg
                        aria-hidden="true"
                        class="main_page_svg"
                        width="13"
                        height="13"
                      >
                        <use xlink:href="#icon-commodity_modify" />
                      </svg>
                    </div>
                  </div>
                  <div class="boxnr svg_box" v-if="!item.disabled">
                    <svg
                      aria-hidden="true"
                      class="main_page_svg marginLeft5"
                      width="20"
                      height="20"
                      @click="handleConfirm(item.price, props.$index, index)"
                    >
                      <use xlink:href="#icon-index_tick" />
                    </svg>
                    <svg
                      aria-hidden="true"
                      class="main_page_svg marginLeft5"
                      width="12"
                      height="12"
                      @click="handleCancel(item.price, props.$index, index)"
                    >
                      <use xlink:href="#icon-index_cross" />
                    </svg>
                  </div>
                  <span v-show="item.disabled">
                    <i
                      v-if="item.mod || item.price"
                      class="el-icon-close group_delete_icon"
                      @click="handleDelGroupFormulae(props, item)"
                    ></i>
                  </span>
                </li>
              </ul>
            </div>
          </template>
        </el-table-column>

        <!-- <el-table-column type="selection" /> -->
        <el-table-column label="商品名称"
        prop="spu_name"
        :width="tableWidth[hash+'spu_name'] || 200">
          <template slot-scope="scope"
            >{{ scope.row.goods.name }} 【{{
              scope.row.spu_name ? scope.row.spu_name.title : ""
            }}】</template
          >
        </el-table-column>
        <el-table-column label="采购价" class-name="main_hei"
        prop="purchase_price"
        :width="tableWidth[hash+'purchase_price'] || 200">
          <template slot-scope="scope">
            <div class="mainus_pe">
              <div v-if="!scope.row.freight_cg">
                <span
                  :style="{
                    color:
                      parseFloat(scope.row.purchase_price) >
                      parseFloat(scope.row.market_price)
                        ? 'red'
                        : '',
                  }"
                >
                  {{ scope.row.purchase_price }}
                </span>

                <svg
                  aria-hidden="true"
                  class="main_page_svg"
                  width="13"
                  height="13"
                  @click="purchasew(scope.$index, 'freight_cg')"
                >
                  <use xlink:href="#icon-commodity_modify" />
                </svg>
              </div>
              <div v-else class="boxnr">
                <el-input
                  v-focus="'freightw' + scope.$index"
                  v-model="scope.row.purchase_price"
                  placeholder="采购价"
                  class="wid80"
                ></el-input>
                <div class="boxnr svg_box">
                  <svg
                    aria-hidden="true"
                    class="main_page_svg marginLeft5"
                    width="20"
                    height="20"
                    @click="
                      inputBlur(
                        scope.row.purchase_price,
                        scope.$index,
                        'freight_cg',
                        'purchase_price'
                      )
                    "
                  >
                    <use xlink:href="#icon-index_tick" />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="main_page_svg marginLeft5"
                    width="12"
                    height="12"
                    @click="
                      (scope.row.purchase_price =
                        scope.row.purchase_price_data),
                        (scope.row.freight_cg = false)
                    "
                  >
                    <use xlink:href="#icon-index_cross" />
                  </svg>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="市场价" class-name="main_hei"
        prop="market_price"
        :width="tableWidth[hash+'market_price'] || 200">
          <template slot-scope="scope">
            <div class="mainus_pe">
              <div v-if="!scope.row.freight_jc">
                {{ scope.row.market_price }}
                <svg
                  aria-hidden="true"
                  class="main_page_svg"
                  width="13"
                  height="13"
                  @click="purchasew(scope.$index, 'freight_jc')"
                >
                  <use xlink:href="#icon-commodity_modify" />
                </svg>
              </div>
              <div v-else class="boxnr">
                <el-input
                  v-focus="'freightw' + scope.$index"
                  v-model="scope.row.market_price"
                  placeholder="市场价"
                  class="wid80"
                ></el-input>
                <div class="boxnr svg_box">
                  <svg
                    aria-hidden="true"
                    class="main_page_svg marginLeft5"
                    width="20"
                    height="20"
                    @click="
                      inputBlur(
                        scope.row.market_price,
                        scope.$index,
                        'freight_jc',
                        'market_price'
                      )
                    "
                  >
                    <use xlink:href="#icon-index_tick" />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="main_page_svg marginLeft5"
                    width="12"
                    height="12"
                    @click="
                      (scope.row.market_price = scope.row.market_price_data),
                        (scope.row.freight_jc = false)
                    "
                  >
                    <use xlink:href="#icon-index_cross" />
                  </svg>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="库存价"
          class-name="main_hei"
          :width="tableWidth[hash+'inventory_price']"
          align="center"
          prop="inventory_price"
        >
        </el-table-column>
        <el-table-column
          label="报价结果"
          prop="userNickname"
          class-name="main_hei"
          :width="tableWidth[hash+'userNickname']"
        >
          <template slot-scope="scope">
            <div class="boxha maincg_bj">
              <p>
                <span>未分组：</span>
                {{ parseFloat(scope.row.market_price) | twoPlace }}
              </p>
              <p
                v-for="(group_data, index) in scope.row.group_data"
                :key="index"
              >
                <span>{{ group_data.title }}：</span>

                {{ group_data | group_price(scope, that) }}
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label
          prop="operate"
          class-name="main_hei"
          :width="tableWidth[hash+'operate']"
          align="center"
        >
          <template slot-scope="scope">
            <el-link
              type="success"
              class="maincg_xa"
              @click="formula_meth(scope.row, scope.$index)"
              >{{ scope.row.down ? "收起" : "报价公式" }}</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      </div>
      <div class="main_num boxdq mg-t-10">
        <div class="main_num_l box">
          <p>
            <em
              >所有商品及规格的分组报价皆可在这里进行设置，注：采购价及市场价的操作记录请在SKU维护菜单中查看！</em
            >
          </p>
        </div>
        <!-- 分页 -->
        <div class="main_page_r">
          <MainPagination
            :current-page="current.page"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            background
            @size-change="changeLimit"
            @current-change="changePage"
          />
        </div>
      </div>
    
    <!-- 导出 -->
    <el-dialog
      title="报价单导出"
      :visible.sync="exportVisible"
      class="main_dialog dialog500"
    >
      <div>
        <p class="exptitle margintop">选择分组</p>
        <el-radio-group v-model="export_form.group_id">
          <el-radio
            v-for="(group, index) in group_list"
            :key="index"
            :label="group.id"
            >{{ group.title }}</el-radio
          >
        </el-radio-group>
      </div>
      <div>
        <p class="exptitle margintop">选择商品</p>
        <el-radio-group v-model="export_form.type">
          <el-radio label="1">已报价商品</el-radio>
          <el-radio label="2">所有商品</el-radio>
        </el-radio-group>
      </div>
      <div>
        <p class="exptitle margintop">选择商品分类</p>
        <el-cascader
          v-model="export_form.category_id"
          :options="options"
          :props="defaultProps"
        ></el-cascader>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="exportVisible = false">取 消</el-button>
        <el-button type="primary" @click="exportConfirm" v-repeatClick
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 导入 -->
    <el-dialog
      title="导入"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="importFormVisible"
      class="main_dialog dialog550"
    >
      <div class="importForm">
        <el-upload
          :headers="{
            Authorization: getToken(),
          }"
          class="upload-demo"
          drag
          :action="group_price_import"
          :on-success="importSuccess"
          :on-error="importerr"
          :show-file-list="false"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </div>

      <div class="progress" v-if="percentShow">
        <el-progress
          :text-inside="true"
          :stroke-width="20"
          :percentage="percent"
          color="#19B098"
        ></el-progress>
      </div>
      <div class="notice" v-if="percentShow">
        <div class="importtips">
          <p v-if="percent == 100" class="success">分组报价同步结束！</p>
          <div v-for="(item, index) in reverseSum" :key="index">
            <!-- <p v-if="item.type == 1" :key="index">
              商品:{{ item.name }}，同步已成功
            </p> -->
            <p v-if="item.type == 2" :key="index" class="fail">
              {{ item.name }}，同步失败
            </p>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button :disabled="cancelDisabled" @click="importFormConfirm(0)"
          >关 闭</el-button
        >
        <el-button type="primary" @click="importFormConfirm(1)" v-repeatClick
          >确 定</el-button
        >
      </div></el-dialog
    >
    </div>
  </div>
</template>

<script>
import { mixins } from "@/mixins/index.js";
import {
  goodsoffer_index,
  sku_changeField,
  goodsoffer_offer,
  goodsoffer_reset,
  group_info,
  export_group_price,
  goodsoffer_deletePrice,
} from "@/api/commodity/commodityGroup";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { recursion, category } from "@/utils/index";
import { exportMethod } from "@/utils/index";
import { group_price_import } from "@/api/currency.js";
import { mapGetters } from "vuex";
export default {
  mixins: [mixins],
  directives: {
    // 聚焦元素
    focus: {
      inserted(el) {
        el.querySelector("input").focus();
      },
    },
  },
  computed: {
    ...mapGetters(["avatar"]),
    reverseSum() {
      return this.percent_list;
    },
  },
  data() {
    return {
      that: this,
      exportMethod,
      group_price_import: group_price_import,
      // 分页
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,

      // 搜索
      form: {
        goods_spu_id: "",
        pid: "",
        category_id: [],
        status: null,
        is_standard: null,
        is_recommend: null,
        type: "",
      },
      // 更多
      moredata: false,
      // 列表数据
      list: {
        list: {
          data: [],
        },
      },
      listLoading: false,
      // 分类
      options: [],
      defaultProps: {
        children: "selfNext",
        label: "title",
        value: "id",
        checkStrictly: true,
      },
      // 全选
      selectArr: [],
      // 焦点
      offsetParent: true,
      // 导出
      exportVisible: false,
      group_list: [],
      //导出信息
      export_form: {
        group_id: "",
        type: "1",
        pid: "",
        category_id: [],
      },
      offer_benchmark_price: "",
      // 导入
      percent_gs: 0,
      percent: 0,
      percentShow: false,
      percent_list: [],
      importArrLength: 1,
      importFormVisible: false,
      cancelDisabled: false,
    };
  },
  filters: {
    // 分组报价结果过滤器
    group_price(group_data, scope, that) {
      let price = scope.row.market_price;

      // group_data.price = Number(group_data.price);
      group_data.price = group_data.price;
      if (group_data.mod == 1 && group_data.price) {
        price = that.$toFixed(
          parseFloat(scope.row.spu_price) + parseFloat(group_data.price)
        );
      }
      if (group_data.mod == 2 && group_data.price) {
        price = that.$toFixed(
          parseFloat(scope.row.spu_price) * parseFloat(group_data.price)
        );
      }
      if (group_data.mod == 3 && group_data.price) {
        price = that.$toFixed(parseFloat(group_data.price));
      }
      if (!group_data.mod) {
        price = that.$toFixed(parseFloat(scope.row.market_price));
      }
      let category = "";
      if (group_data.category_price) {
        category = group_data.category_price;
      }
      return category ? `${category}（分类）` : price;
    },
  },
  mounted() {
    window.Echo.channel(
      "bacthImportGroupPrice." + this.avatar.company_id
    ).listen("BacthImportGroupPriceEvent", (e) => {
      this.cancelDisabled = true;
      this.importArrLength = e.notice.count;
      this.percentShow = true;
      if (e.notice.code == 0) {
        this.percent_list.push({
          num: this.percent,
          type: 1,
          name: e.notice.msg,
        });
      } else if (e.notice.code == 100) {
        this.percent_list.push({
          num: this.percent,
          type: 2,
          name: e.notice.msg,
        });
      }
      this.percent_gs = parseInt(this.percent_gs) + 1;
      if ((this.percent_gs / this.importArrLength) * 100 >= 100) {
        this.percent = 100;
        this.cancelDisabled = false;
        return;
      }
      this.percent =
        this.percent_gs / this.importArrLength
          ? parseInt((this.percent_gs / this.importArrLength) * 100)
          : 0;
    });
  },
  created() {
    // 列表
    this.getNumerical(260);
    this.group_info();
    this.goodsoffer_index();
  },
  methods: {
    getSearchFor() {
      this.getArticleList();
    },
    startGetting() {
      this.getArticleList();
    },
    // 报价公式删除
    handleDelGroupFormulae(props, item) {
      let goods = props.row;
      let form = {
        goods_spu_id: goods.id,
        group_id: item.group_id,
      };

      item.mod = "";
      item.price = 0;

      this.goodsoffer_deletePrice(form);
    },
    goodsoffer_deletePrice(form) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        form
      );
      goodsoffer_deletePrice(data).then((res) => {
        if (res.errcode == 0) {
        } else {
          this.$message.error(res.errmsg);
          this.group_info();
          this.goodsoffer_index();
        }
      });
    },
    /* 导入开始 */
    importForm() {
      this.importFormVisible = true;

      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
    },
    importFormConfirm(type) {
      this.percentShow = false;
      if (type == 0) {
        this.percent = 0;
        this.percent_gs = 0;
        this.percent_list = [];
        this.importFormVisible = false;
      } else if (type == 1) {
        this.percent = 0;
        this.percent_gs = 0;
        this.percent_list = [];
        this.importFormVisible = false;
        this.goodsoffer_index();
      }
    },
    importerr(err, file, fileList) {
      // console.log(err);
    },
    importSuccess(response, file, fileList) {
      if (response.errcode != 0) {
        this.$message.error(response.errmsg);
      }
      // console.log(response);
    },
    /* 导入结束 */
    // 监听全选
    handleSelectionChange(val) {
      this.selectArr = [];
      val.map((item) => {
        this.selectArr.push(item.id);
      });
    },
    // 判断表格是否有子项，无子项不显示展开按钮
    getRowClass(row) {
      if (row.row.group_data) {
        if (row.row.group_data.length === 0) {
          return "maincg_cover";
        }
      }
    },
    // 报价公式-展开行
    formula_meth(row, index) {
      let $table = this.$refs.multipleTable;
      this.list.list.data[index].down = !this.list.list.data[index].down;
      this.list.list.data.map((item) => {
        if (item.down) {
          $table.toggleRowExpansion(item, true);
        } else {
          $table.toggleRowExpansion(item, false);
        }
      });
    },
    // 点击采购价、市场价
    purchasew(index, name) {
      if (this.offsetParent) {
        this.list.list.data[index][name] = !this.list.list.data[index][name];
      }
    },
    // 焦点离开
    inputBlur(val, index, name, type) {
      this.offsetParent = false;
      if (!val) {
        this.$message.error("请输入正确格式的数字");
        return;
      }
      if (/^(\d+\.?)?\d{0,2}$/.test(parseFloat(val)) && val != "") {
        this.list.list.data[index][name] = !this.list.list.data[index][name];
        this.offsetParent = true;
        this.sku_changeField(val, this.list.list.data[index].id, type);
      } else {
        this.$message.error("请输入正确格式的数字");
      }
    },
    sku_changeField(val, id, type) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, { id: id, type: type, value: val })
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: id, type: type, value: val }
      );
      sku_changeField(data).then((res) => {
        if (res.errcode == 0) {
          this.$message.success("修改成功");
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 点击报价
    offer(index, index1) {
      if (this.offsetParent) {
        this.list.list.data[index].group_data[index1].disabled =
          !this.list.list.data[index].group_data[index1].disabled;
        this.$nextTick(() => {
          this.$refs[
            "maincg" + String(index) + String(index1)
          ][0].$el.offsetParent
            .querySelector("input")
            .focus();
        });
      }
    },
    // 报价焦点离开
    maincgBlur(val, index, index1) {
      this.offsetParent = false;
      if (
        //  /^(\d+\.?)?\d{0,2}$/
        // /^(\d)+(\.\d{1,2})$/.test(val.target.value) &&
        val.target.value != "" &&
        val.target.value != null
      ) {
        this.list.list.data[index].group_data[index1].disabled =
          !this.list.list.data[index].group_data[index1].disabled;
        this.offsetParent = true;
        this.goodsoffer_offer(val.target.value, index, index1, 2);
      } else {
        this.$nextTick(() => {
          if (val.target.offsetParent) {
            val.target.offsetParent.querySelector("input").focus();
          }
        });
      }
    },
    goodsoffer_offer(val, index, index1, type) {
      let obj =
        type == 1
          ? {
              goods_id: this.list.list.data[index].goods_id,
              goods_spu_id: this.list.list.data[index].id,
              group_id: this.list.list.data[index].group_data[index1].group_id,
              type: type,
              mod: val,
            }
          : {
              goods_id: this.list.list.data[index].goods_id,
              goods_spu_id: this.list.list.data[index].id,
              group_id: this.list.list.data[index].group_data[index1].group_id,
              type: type,
              price: val,
            };
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, obj)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        obj
      );
      goodsoffer_offer(data).then((res) => {
        if (res.errcode == 0) {
          this.list.list.data[index].group_data[index1].old_price = val;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 点击报价时候确认图标
    handleConfirm(price, index, index1) {
      let ref = "maincg" + String(index) + String(index1);
      this.offsetParent = false;
      if (price != "" && price != null) {
        this.list.list.data[index].group_data[index1].disabled =
          !this.list.list.data[index].group_data[index1].disabled;
        this.offsetParent = true;
        this.goodsoffer_offer(price, index, index1, 2);
      } else {
        this.$nextTick(() => {
          this.$message.error("请输入正确的数字");
          this.$refs[ref].focus();
        });
      }
    },
    // 点击报价时候取消图标
    handleCancel(price, index, index1) {
      this.list.list.data[index].group_data[index1].disabled =
        !this.list.list.data[index].group_data[index1].disabled;
      this.list.list.data[index].group_data[index1].price =
        this.list.list.data[index].group_data[index1].old_price;
    },
    // 更多
    more() {
      this.moredata = !this.moredata;
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.goodsoffer_index();
    },
    changePage(page) {
      this.current.page = page;
      this.goodsoffer_index();
    },
    // 搜索
    getArticleList() {
      this.current.page = 1;
      this.goodsoffer_index();
    },
    reset() {
      this.$refs["userListFrom"].resetFields();
      this.$refs["changeGoodsInput"].name = "";
      this.goodsoffer_index();
    },
    // 清除所有公式
    clean() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
      this.$confirm("是否清除所有公式?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          goodsoffer_reset(data).then((res) => {
            if (res.errcode == 0) {
              this.$message({
                message: "清除成功",
                type: "success",
              });
              this.goodsoffer_index();
            } else {
              this.$message.error(res.errmsg);
            }
          });
        })
        .catch(() => {});
    },
    // 导出
    export_pop() {
      this.exportVisible = true;
    },
    exportConfirm() {
      if (!this.export_form.group_id) {
        this.$message.warning("请选择分组");
        return;
      }
      let form = JSON.parse(JSON.stringify(this.export_form));
      form.pid = form.category_id[0] ? form.category_id[0] : "";
      form.category_id = category(form.category_id);

      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        form
      );
      const notify = this.$notify.info({
        title: "开始导出...",
        type: "success",
        duration: 0,
      });
      export_group_price(data).then((res) => {
        this.exportMethod(res, "分组报价", notify);
      });
      this.exportVisible = false;
      this.export_form.category_id = "";
      this.export_form.pid = "";
    },
    //分组信息
    group_info() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
      group_info(data).then((res) => {
        if (res.code == 0) {
          this.group_list = res.list;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 列表
    goodsoffer_index() {
      this.listLoading = true;
      let form = JSON.parse(JSON.stringify(this.form));
      form.pid = form.category_id[0] ? form.category_id[0] : "";
      form.category_id = category(form.category_id);
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, form, this.current)) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        form,
        this.current
      );
      goodsoffer_index(data).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          this.options = recursion(res.data.categoryList, true);
          res.data.list.data.map((e) => {
            e.purchase_price_data = e.purchase_price;
            e.freight_purchase_price = false;
            e.market_price_data = e.market_price;
            e.freight_market_price = false;
            e.down = false;
            e.freight_cg = false;
            e.freight_jc = false;
            e.group_data.forEach((p) => {
              p.disabled = true;
              p.old_price = p.price;
              if (!p.mod) {
                p.mod = "";
              }
            });
          });
          this.list = res.data;
          this.totalCount = res.data.list.total;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 订单差额 ？注释
    renderHeader_purchase(h, { column, $index }) {
      return h("div", [
        h("span", {
          domProps: {
            innerHTML: column.label,
          },
        }),
        h(
          "el-tooltip",
          {
            attrs: {
              effect: "dark",
              content: "注释：分组后面括号中的为分类报价结果",
              placement: "top",
            },
          },
          [
            h("i", {
              style: "margin-left: 5px;margin-top:-1px;",
              class: "el-icon-question table-msg",
            }),
          ]
        ),
      ]);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.maincg_ul {
  padding: 10px 0;
  ul {
    li {
      margin-left: 40px;
      margin-right: 40px;
      margin-top: 6px;
      margin-bottom: 6px;
      align-items: center;
      span {
        font-size: $font_14;
        color: $colour_3;
      }
      /deep/.el-select {
        margin-left: 5px;
      }
      .maincg_uli {
        margin-left: 5px;
        position: relative;
        /deep/ .el-input__inner {
          padding-right: 0;
        }
        .maincg_uli_s {
          position: absolute;
          right: 10px;
          top: 8px;
          z-index: 9;
          use {
            fill: $menuText;
          }
          &:hover {
            cursor: pointer;
            use {
              fill: $menuActiveText;
            }
          }
        }
      }
    }
  }
}
.maincg_bj {
  margin-left: -30px;
  p {
    span {
      display: inline-block;
      min-width: 56px;
      text-align: right;
    }
    margin-left: 30px;
    color: $menuText;
    font-size: $font_14;
  }
}
.mainus_pe {
  svg {
    vertical-align: -3px;
    margin-left: 30px;
  }
  use {
    fill: $menuText;
  }
  &:hover {
    cursor: pointer;
    use {
      fill: $menuActiveText;
    }
  }
}

.new_navbar_svg {
  vertical-align: top;
  margin-left: 5px;
  use {
    fill: #606266;
  }
}
/deep/.el-radio-group {
  margin-bottom: 15px;
}
/deep/.el-radio {
  margin-bottom: 6px;
}
/deep/ .el-radio__inner {
  border-color: #dcdfe6;
}
.exptitle {
  display: block;
  font-size: 16px;
  color: #000000;
  margin: 0 0 10px;
  cursor: pointer;
}

/* 导入---开始 */
.importForm {
  display: flex;
  align-items: center;
  justify-content: center;
}
.progress {
  padding: 15px 40px;
  // display: flex;
  // justify-content: center;
  // align-items: center;
}
.notice {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .importtips {
    overflow-y: scroll;
    width: 350px;
    height: 84px;
    height: 84px;
    background: #ffffff;
    border: 1px solid #d8d8d8;
    padding: 10px 15px;
    .fail {
      color: #ff5a5a;
      line-height: 1.2;
      font-size: 12px;
    }
    .success {
      color: #19b098;
      line-height: 1.2;
      font-size: 12px;
    }
  }
}
/* 导入---结束 */
.svg_box {
  display: flex;
  flex-direction: column;
}
.group_delete_icon {
  font-size: 18px;
  color: #666;
  font-weight: 700;
  user-select: none;
  margin-left: 5px;
}
/deep/ .el-form-item--small.el-form-item {
  margin-bottom: 10px !important;
}
/deep/.el-table__expand-icon{
  display: none;
}
</style>
